<template>
  <!-- 3. 我的项目 -->
  <div class="projects">
    <el-container>
      <el-header>
        <div class="header">
          <div class="info">
            <h2 class="title">我的项目</h2>
            <span class="describe">在这里，可以集中管理您发布的项目信息</span>
          </div>
          <el-button @click="handleNewBtn" type="primary">新建项目</el-button>
        </div>
      </el-header>
      <el-container class="content">
        <el-aside width="200px">
          <el-menu
            :default-active="defaultActive"
            @close="handleClose"
            ref="menusRef"
            class="el-menu-vertical-demo"
          >
            <el-sub-menu index="1">
              <template #title>
                <span>项目列表</span>
              </template>
              <template v-for="item in menuItems" :key="item.id">
                <el-menu-item :index="item.id + ''" @click="handleMenuItemClick(item.url)">
                  {{ item.label }}
                </el-menu-item>
              </template>
            </el-sub-menu>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
    <el-backtop :right="30" :bottom="100" />
  </div>
</template>

<script setup lang="ts">
import {ref, computed, onMounted} from 'vue'
import { useRoute, useRouter } from 'vue-router'

const router = useRouter()
const menuItems = [
  { id: 1, label: '实施中', url: '/main/projects/implementation' },
  { id: 2, label: '已完成', url: '/main/projects/finished' }
  // { id: 3, label: '已暂停', url: '/main/projects/paused' }
]
const menusRef = ref()
// 新建项目按钮点击事件
function handleNewBtn() {
  router.push('/main/createproject')
}

// 禁止menu收起：点击menu时打开对应的keyPath
function handleClose(key: string, keyPath: string[]) {
  menusRef.value.open(keyPath)
}

// 监听menu的点击事件：跳转到对应的路由，查看对应的项目列表
function handleMenuItemClick(url: string) {
  router.push(url)
}

// el-menu的默认菜单（刷新保持选中状态）
const route = useRoute()
let preRoute = ''
const defaultActive = computed(() => {
  let pathMenuId: number = 0
  let routePath = route.path
  // 如果要进入项目详情页面，会导致路由匹配不成功，所以要提前保存上一条route
  // 并在进入详情页面时，默认菜单是保存上一条路由的路径
  if (route.path !== '/main/projects/details') {
    preRoute = route.path
  } else {
    routePath = preRoute
  }
  for (const menu of menuItems) {
    if (menu.url === routePath) {
      pathMenuId = menu.id
    }
  }
  return pathMenuId + ''
})
onMounted(() => {
  document.title = '我的项目 - 实力接单'
})
</script>

<style lang="less" scoped>
.projects {
  width: 1100px;
  background-color: #f0f2f5;
  margin: 0 auto;
  padding: 20px;
  .el-header,
  .el-aside,
  .el-main {
    background-color: #fff;
  }
  .el-main::-webkit-scrollbar {
    display: none;
  }
  .el-header {
    margin-bottom: 15px;
    border-radius: 10px;
    height: 70px;
    .header {
      padding: 10px 20px;
      display: flex;
      justify-content: space-between;
      .info {
        .title {
          padding-bottom: 8px;
        }
        .describe {
          font-size: 14px;
          color: #73767a;
        }
      }
      .el-button {
        margin-top: 10px;
      }
    }
  }
  .el-container {
    height: 100%;
    .el-aside {
      margin-right: 20px;
    }
  }
  .el-backtop {
    z-index: 1000;
  }
}
</style>
